<template>
  <view class="checkbox-container">
    <up-checkbox-group
      v-model="selectedValues"
      placement="column"
      @change="checkboxChange"
    >
      <view class="checkbox-row">
        <!-- 遍历生成的复选框，包括上下车地点 -->
        <div
          v-for="(item, index) in checkboxList1"
          :key="index"
          class="checkbox-item"
        >
          <up-checkbox :label="item.name.label" :name="item.name"></up-checkbox>
        </div>
        <Place @update-selected-id="handleSelectedId" />
      </view>
    </up-checkbox-group>
    <div><Reservation_date @updateDates="handleUpdateDates" /></div>
  </view>
  <view style="padding: 20px; margin-top: -100px">
    <up-button
      text="提交"
      color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
      @click="submitAppointment"
      style="width: 500px; margin-left: 450px"
    ></up-button>
  </view>
  <scroll-view>
    <!-- <uni-popup
      ref="popup"
      type="top"
      border-radius="10px 10px 0 0"
      :is-mask-click="true"
    > -->
    <OrderDetail :order-data="data" v-if="data.length > 0" />
    <!-- </uni-popup> -->
  </scroll-view>
</template>
<script setup>
import { reactive, ref } from "vue";
import Place from "./travel/Place2.vue";
import OrderDetail from "@/pages/travel/OrderDetail.vue";
import Reservation_date from "@/pages/travel/Reservation_date.vue";

// 控制日期选择器的显示与隐藏
const showDatetimePicker = ref(false);
const selectedDate = ref(null);
const selectedDate2 = ref(null);
const popup = ref(null);
const reservation_type = ref([]);
const baseUrl = "/api";
// 复选框选中的值，绑定到简单数组
const selectedValues = ref([]);
const select = (selectedValues) => {
  return (
    selectedValues.filter((name) => {
      return name.label === "上下车地点";
    }).length !== 0
  );
};
// 复选框列表数据，包括上下车地点
const checkboxList1 = reactive([
  { name: { label: "去程", value: 0 }, disabled: false },
  { name: { label: "返程", value: 1 }, disabled: false },
  // {name: {label: '日期'}, disabled: false},
  // {name: {label: '上下车地点'}, disabled: false}  // 包含上下车地点
]);
const list = ref([]);
// 复选框变化时触发
const isDatetimePickerShownOnce = ref(false); // 标志位，记录是否已显示过日期选择器
const checkboxChange = (value) => {
  list.value = value;
  reservation_type.value = list.value
    .filter((item) => {
      return item.label === "去程" || item.label === "返程";
    })
    .map((item) => {
      return item.value;
    });
  console.log(reservation_type.value);
  let date =
    value.filter((name) => {
      return name.label === "日期";
    }).length !== 0;
  if (date) {
    // 当选中“日期”复选框时，如果日期选择器未显示过，则显示
    if (!isDatetimePickerShownOnce.value) {
      showDatetimePicker.value = true; // 显示日期选择器
      isDatetimePickerShownOnce.value = true; // 设置标志位，防止连续显示
    }
  } else {
    // 当取消选中“日期”复选框时，重置标志位，允许再次选中时显示
    showDatetimePicker.value = false; // 隐藏日期选择器
    isDatetimePickerShownOnce.value = false; // 重置标志位
  }
};
const selectedId = ref(null);
const data = ref([]);
function handleSelectedId(id) {
  selectedId.value = id;
}
const submitAppointment = async () => {
  //   popup.value.open("top");
  console.log(selectedId.value);
  console.log(reservation_type.value);
  uni.request({
    url: baseUrl + "/order/reserve/list", // 你的请求地址
    method: "POST", // 请求方法，支持 GET、POST 等
    data: {
      go_date: selectedDate.value.value,
      return_date: selectedDate2.value.value,
      reservation_type: reservation_type.value,
      pickup_location_id: selectedId.value,
    },
    header: {
      "Content-Type": "application/json", // 请求头，可以根据需要设置
    },
    success: (res) => {
      data.value = res.data.data;
      // 请求成功的回调
      console.log("请求成功", data.value);
    },
    fail: (err) => {
      // 请求失败的回调
      console.error("请求失败", err);
    },
  });
};
const handleUpdateDates = (date1, date2) => {
  selectedDate.value = date1;
  selectedDate2.value = date2;
};
</script>
<style scoped>
.checkbox-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: flex-start; /* 取消垂直居中，使内容从顶部对齐 */
  height: 65vh;
  width: 60vw;
  flex-direction: column;
  margin-top: -160px;
  border: 1px solid #ddd;
  margin-left: 300px;
  text-align: center;
}
.checkbox-item {
  width: 100px;
  margin-left: 10px;
  margin-top: 10px;
  /*flex: 1 2 auto; !* 让每个项目尽可能地占用空间*/
  /*min-width: 100px; !* 设置最小宽度，以适应复选框和标签 *!*/
  /*border: 2px solid red;*/
}
.checkbox-row {
  display: flex;
  align-items: center;

  /*width: 300px;*/
  width: 100vw;
  margin-bottom: 4px;
  /*border: 2px solid red;*/
}
.flex-row {
  display: flex;
  position: absolute;
  align-items: center;
  margin-left: 6rem;
  margin-top: 5rem;
  height: 20rem;
  width: 10rem;
}
.flex-row up-checkbox {
  margin-right: 10px; /* 为复选框和下拉框之间添加间距 */
}
h1 {
  font-weight: 400;
}
</style>
